<template>
	<view class="">
		<view class="page-bg-gray"></view>
		<view class="goods-box">
			<view class="order">
				<view class="item">
					<view class="left"><image :src="photo_base_url + orderSub.goods_cover" mode="aspectFill"></image></view>
					<view class="content">
						<view class="title u-line-2">{{ orderSub.goods_name }}</view>
						<view class="type">{{ orderSub.goods_option_title }}</view>
					</view>
					<view class="right">
						<view class="price">
							￥{{ priceInt(fenZhuanYuan(orderSub.sell_price)) }}
							<text class="decimal">.{{ priceDecimal(fenZhuanYuan(orderSub.sell_price)) }}</text>
						</view>
						<view class="number">x{{ orderSub.total }}</view>
						<view style="height: 30rpx;"></view>
						<view class="price">
							实付：￥{{ priceInt(fenZhuanYuan(orderSub.paid)) }}
							<text class="decimal">.{{ priceDecimal(fenZhuanYuan(orderSub.paid)) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-cell-group :border="false" style="margin-top: 30rpx;" v-for="(item,index) in refunds" :key="index">
			<u-cell-item title="售后单号" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class">
				<view slot="right-icon" class="">
					{{ item.refund_no }}
				</view>
			</u-cell-item>
			<u-cell-item title="申请时间" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class">
				<view slot="right-icon" class="">
					{{ $u.timeFormat(item.apply_time, 'yyyy/mm/dd hh:MM:ss') }}
				</view>
			</u-cell-item>
			<u-cell-item title="退款原因" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class">
				<view slot="right-icon" class="">
					{{ getActionSheetText('reason_type',item.reason_type) }}
				</view>
			</u-cell-item>
			<u-cell-item title="退款金额" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class">
				<view slot="right-icon" class="">
					￥ {{ fenZhuanYuan(item.apply_money) }}
				</view>
			</u-cell-item>
			<u-cell-item title="退换物流" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class"
			v-if="item.refund_type == 2">
				<view slot="right-icon" class="">
					<view>{{ item.express_com }}</view>
					<view>{{ item.express_sn }}</view>
				</view>
			</u-cell-item>
			<u-cell-item title="补充说明" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class"
			v-if="item.apply_remark">
				<view slot="right-icon" class="">
					{{ item.apply_remark }}
				</view>
			</u-cell-item>
			<u-cell-item title="处理结果" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class">
				<view slot="right-icon" class="">
					{{ getActionSheetText('status',item.status) }}
				</view>
			</u-cell-item>
			<u-cell-item title="处理时间" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class"
			v-if="item.status > 1">
				<view slot="right-icon" class="">
					{{ $u.timeFormat(item.handle_time, 'yyyy-mm-dd hh:MM:ss') }}
				</view>
			</u-cell-item>
			<u-cell-item title="处理说明" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class"
			v-if="item.status > 1 && item.handle_remark">
				<view slot="right-icon" class="">
					{{ item.handle_remark }}
				</view>
			</u-cell-item>
		</u-cell-group>
		<template v-if="orderSub.refund_status === 0 || orderSub.refund_status === 2">
		<view class="order-wrapper" v-if="selectRefundType == 0">
			<view class="order-hd flex">
				<u-section title="选择服务" :right="false" :show-line="false"></u-section>
			</view>
			<u-cell-group :border="false">
				<u-cell-item @click="selectRefund(1)">
					<u-icon slot="icon" name="icon5" custom-prefix="g-icon" :size="46" color="#E41F19"></u-icon>
					<view solt="title" style="padding-left: 15px;text-align: left;font-weight: 700;color: #000;font-size: 32rpx;">
						我要退款(无需退货)
					</view>
					<view solt="label" style="padding-left: 15px;text-align: left;">
						没收到货,或与卖家协商同意不用退货只退款
					</view>
				</u-cell-item>
				<u-cell-item @click="selectRefund(2)">
					<u-icon slot="icon" name="tuihuo" custom-prefix="g-icon" :size="46" color="#E41F19"></u-icon>
					<view solt="title" style="padding-left: 15px;text-align: left;font-weight: 700;color: #000;font-size: 32rpx;">
						我要退货退款
					</view>
					<view solt="label" style="padding-left: 15px;text-align: left;">
						已收到货,需要退还收到的货物
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="order-wrapper" v-if="selectRefundType == 1">
			<view class="order-hd flex">
				<u-section title="退款信息" :right="false" :show-line="false"></u-section>
			</view>
			<view style="padding: 0 30rpx;">
			<u-form label-align="center" label-width="180" :model="form1" ref="uForm1">
				<u-form-item label="货物状态"><u-input v-model="form1.goods_status_text" type="select" @click="actionSheetOpen('goods_status')" /></u-form-item>
				<u-form-item label="退款原因"><u-input v-model="form1.reason_type_text" type="select" @click="actionSheetOpen('reason_type')" /></u-form-item>
				<u-form-item label="退款金额" required>
					<view><u-input v-model="form1.apply_money" :disabled="getApplyMoneyStatus()" type="number" :clearable="false"/></view>
				</u-form-item>
				<u-form-item>
					<view style="color: #CCC;font-size: 18rpx;">{{ getModfiyText() }}，最多 ￥ {{maxPrice}} ，含发货邮费 ￥ 0.00 </view>
				</u-form-item>
			</u-form>
			</view>
		</view>
		<view class="order-wrapper" v-if="selectRefundType == 2">
			<view class="order-hd flex">
				<u-section title="退款信息" :right="false" :show-line="false"></u-section>
			</view>
			<view style="padding: 0 30rpx;">
			<u-form label-align="center" label-width="180" :model="form2" ref="uForm2">
				<u-form-item label="退款原因"><u-input v-model="form2.reason_type_text" type="select" @click="actionSheetOpen('reason_type')" /></u-form-item>
				<u-form-item label="退款金额" required>
					<view><u-input v-model="form2.apply_money" :disabled="getApplyMoneyStatus()" type="number" :clearable="false"/></view>
				</u-form-item>
				<u-form-item>
					<view style="color: #CCC;font-size: 18rpx;">{{ getModfiyText() }}，最多 ￥ {{maxPrice}} ，含发货邮费 ￥ 0.00 </view>
				</u-form-item>
				<u-form-item label="快递公司" required>
					<u-input v-model="form2.express" :clearable="false"/>
				</u-form-item>
				<u-form-item label="快递单号" required>
					<u-input v-model="form2.express_sn" :clearable="false"/>
				</u-form-item>
			</u-form>
			</view>
		</view>
		<view class="order-wrapper" v-if="selectRefundType > 0">
			<view class="order-hd flex">
				<u-section title="补充说明" :right="false" :show-line="false"></u-section>
			</view>
			<view style="padding: 0 30rpx;">
			<u-form label-align="center" label-width="180" :model="form3" ref="uForm3">
				<u-form-item>
					<u-input v-model="form3.apply_remark" type="textarea"/>
				</u-form-item>
			</u-form>
			</view>
		</view>
		<view style="height: 160rpx;"></view>
		<view class="addSite" v-if="selectRefundType > 0" @click="submitData">
			<view class="add">
				确定
			</view>
		</view>
		</template>
		<u-action-sheet :list="actionSheetList[actionSheetName]" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			},
			maxPrice(){
				return this.fenZhuanYuan(this.orderSub.paid)
			}
		},
		data() {
			return {
				actionSheetName: '',
				actionSheetShow: false,
				actionSheetList: {
					'goods_status':[
						{
							text: '未收到货',
							id:1
						},
						{
							text: '已收到货',
							id:2
						},
					],
					'reason_type':[
						{text: '不喜欢/不想要',id:1},
						{text: '空包裹',id:2},
						{text: '未按约定发货',id:3},
						{text: '快递/物流一直未找到',id:4},
					],
					'status' : []
				},
				selectRefundType: 0,
				orderSub: {},
				form1: {
					goods_status_text:'',
					goods_status:0,
					reason_type_text:'',
					reason_type:0,
					apply_money:0
				},
				form2: {
					reason_type_text:'',
					reason_type:0,
					apply_money:0,
					express:'',
					express_sn:''
				},
				form3: {
					apply_remark:''
				},
				refunds: [],
				photo_base_url: ''
			}
		},
		onLoad() {
			console.log(this.$Route.query)
			this.getData(this.$Route.query)
		},
		methods:{
			fenZhuanYuan(_price){
				return (_price / 100).toFixed(2)
			},
			getApplyMoneyStatus(){
				if (this.selectRefundType === 1){
					return this.form1.goods_status === 1
				} else {
					return false
				}
			},
			getModfiyText(){
				if (this.selectRefundType === 1){
					if (this.form1.goods_status !== 1){
						return '可修改'
					}
					else {
						return '不可修改'
					}
				}
				if (this.selectRefundType === 2){
					return '可修改'
				}
				
				return '不可修改'
			},
			getData(_query){
				this.$api.order.orderSubAftersale({sid:_query.sid}).then(res => {
					console.log(res)
					this.orderSub = res.order
					this.photo_base_url = res.photo_base_url
					this.form1.apply_money = this.fenZhuanYuan(this.orderSub.paid)
					this.form2.apply_money = this.fenZhuanYuan(this.orderSub.paid)
					this.actionSheetList['goods_status'] = res.goods_status
					this.actionSheetList['reason_type'] = res.reason_type
					this.actionSheetList['status'] = res.status
					this.refunds = res.refunds
				})
				.catch(err => {
					console.log(err)
				})
			},
			selectRefund(_type){
				this.selectRefundType = _type
			},
			actionSheetOpen(_type){
				this.actionSheetName = _type
				this.actionSheetShow = true
			},
			getActionSheetText(_type,_id){
				let tmps = this.actionSheetList[_type].filter(item => {
					return item.id == _id
				})
				if (tmps.length < 1){
					return ''
				}
				
				return tmps[0].text
			},
			actionSheetCallback(index){
				this['form' + this.selectRefundType][this.actionSheetName + '_text'] = this.actionSheetList[this.actionSheetName][index]['text']
				this['form' + this.selectRefundType][this.actionSheetName] = this.actionSheetList[this.actionSheetName][index]['id']
			},
			submitData(){
				const that = this
				let submitData = JSON.parse(JSON.stringify(Object.assign(this['form' + this.selectRefundType],this.form3)))
				submitData.apply_money = submitData.apply_money * 100
				submitData.order_sub_id = this.orderSub.id
				submitData.refund_type = this.selectRefundType
				console.log(submitData)
				this.$api.order.saveOrderSubAftersale(submitData).then(res => {
					console.log(res)
					that.$u.toast('提交成功，请等待处理')
					setTimeout(function() {
						uni.$emit('refundChange',{
							refund_status:1
						})
						that.$myRouter.back()
					}, 1500);
				})
				.catch(err => {
					console.log(err)
					that.$u.toast('失败，' + err.message)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/member_order_list.scss';
	.order-create-tabbar{
		z-index: 100;
		border-top: 1px solid #CCC;
		background-color: #FFF;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		position: fixed;
		padding: 0 30rpx;
		bottom: 0;
		.main{
			position: relative;
			display: flex;
			font-size: 32rpx;
			.right{
				position: absolute;
				top:0;
				right: 0;
			}
			.goods-num{
				color: #000000;
				font-weight: 700;
			}
			.paid-box{
				margin-left: 10rpx;
				position: relative;
				min-width: 50%;
				.info{
					.price{
						font-size: 36rpx;
					}
				}
			}
			.paid-box.discount{
				.info{
					height: 72rpx;
					line-height: 72rpx;
				}
				.btn{
					position: absolute;bottom:0;color: #E41F19;height:60rpx;line-height:60rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	.price{
		color: #E41F19;
		font-weight: 700;
	}
	.coupon-not{}
	.coupon-select{
		color: #333;
	}
	.coupon-discount{
		color: #E41F19;
	}
	.cell-hover-class{
		
	}
	.other-box{
		margin: 20rpx;
		.group{
			border-radius: 20rpx;
			/deep/ .u-cell-item-box{
				border-radius: 20rpx;
			}
		}
	}
	.detailsContent{
		padding: 30rpx;
	}
	
	.discount-price{
		color: #E41F19;
	}
	
	.btnCustomStyle{
		padding: 0 40rpx;
	}
	.order-wrapper{
		background-color: #FFF;
		margin: 0 20rpx;
		
		.order-hd{
			justify-content: space-between;
			padding: 20rpx 28rpx;
			margin-top: 20rpx;
			border-bottom: 1px solid #F5F5F5;
			font-size: 30rpx;
			color: #282828;
			
			.right {
				align-items: center;
				color: #666666;
				font-size: 26rpx;
			
				.icon-xiangyou {
					margin-left: 5rpx;
					margin-top: 6rpx;
					font-size: 26rpx;
				}
			}
		}
	}
	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 60rpx;
		position: fixed;
		bottom: 30rpx;
		left: 80rpx;
		z-index: 10;
		background-color: red;
		border-radius: 60rpx;
		font-size: 26rpx;
		.add{
			display: flex;
			align-items: center;
			color: #ffffff;
			.icon{
				margin-right: 10rpx;
			}
		}
	}
</style>